<template>
    <div>
        <h1>用户列表</h1>
        <ul>
            <li v-for="user in users" :key="user.id">{{ user.name }} ({{ user.age }}岁)</li>
        </ul>
    </div>
    <div>
      <h1>登录</h1>
      <form @submit.prevent="handleLogin">
        <div>
          <label for="username">用户名：</label>
          <input type="text" id="username" required v-model="username">
        </div>
        <div>
          <label for="password">密码：</label>
          <input type="password" required id="password" v-model="password">
        </div>
        <button type="submit">登录</button>
      </form>
      <p v-if="message">{{message}}</p>
    </div>


</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import {loginUser} from './mock/index.js'
 
const users = ref([]);


// 用户名，用户密码
const username = ref('')
const password = ref('')
// 登陆成功的信息
const message=ref('')

// 登录
const handleLogin = async()=>{
  try {
    console.log('登录');
    const res = await loginUser({
      username:username.value,
      password:password.value
    })
    console.log(res);
    if(res.data.code ===200){
      message.value = res.data.message
    }
  } catch (error) {
    
  }
}

onMounted(async () => {
    try {
        const response = await axios('/api/user');
        users.value = response.data.data;
    } catch (error) {
        console.error('获取用户列表失败:', error);
    }
});
</script>